<template>
  <div>
    <a-tabs v-model="activeKey" style="background:#fff;margin-top:30px;padding:40px;border-radius:10px;">
      <a-tab-pane key="1" tab="操作权限">
        <a-tree checkable :tree-data="pageData" :replaceFields="{title:'name', key:'id' }" :checkedKeys="checkedKeys" @check="getCheckedKeys"></a-tree>
        <a-button type="primary" style="margin-top:20px;" @click="onSave">保存</a-button>
      </a-tab-pane>
      <a-tab-pane key="2" tab="数据权限">
        <a-row style="width:480px;height:176px;margin:0 auto;">
          <div style="margin:30px 0;">
            <span style="font-weight:bold;color:#333;display:block;font-size:16px;">数据权限</span>
            <span style="color:#333;display:block;">说明：（设置该角色的用户可以操作的数据的范围）</span>
          </div>
          <a-radio-group v-model="permissionsValue" @change="getPermissionsValue">
            <a-radio :style="radioStyle" :value="1">
              个人权限
              <span style="margin-left:80px;">负责或参与项目对应的数据</span>
            </a-radio>
            <a-radio :style="radioStyle" :value="2">
              所属部门
              <span style="margin-left:80px;">查询下属所有员工负责项目的数据</span>
            </a-radio>
          </a-radio-group>
        </a-row>
      </a-tab-pane>
      <a-tab-pane v-if="isMember" key="3" tab="成员列表">
        <div style="text-align:right;margin-bottom:15px;">
          <a-popconfirm title="确定要删除选中的角色吗?" ok-text="确定" cancel-text="取消" @confirm="onConfirmDelete">
            <a-button @click="onBatchRemove" :disabled="selectedRowKeys.length<=0">批量删除</a-button>
          </a-popconfirm>
        </div>
        <a-table class="employees-table" :columns="columns" :data-source="dataSource" :row-selection="rowSelection" rowKey="id" :pagination="{
          current: page,
          pageSize: pageSize,
          total: total,
          showLessItems: true,
          onChange: onPageChange,
          onShowSizeChange: onSizeChange,
        }">
          <div slot="operation" slot-scope="text, record">
            <a-popconfirm title="确定要删除该角色吗?" ok-text="确定" cancel-text="取消" @confirm="onConfirmDelete">
              <a class="ant-dropdown-link" @click="onDeleteMember(record)">删除</a>
            </a-popconfirm>
          </div>
        </a-table>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script>
export default {
  name: "Detail",
  props: {
    isMember: {
      type: Boolean,
      default: true
    },
    pageData: Array,
    columns: Array,
    dataSource: Array,
    checkedKeys: Array,
    page: {
      type: Number,
      default: 1
    },
    pageSize: {
      type: Number,
      default: 10
    },
    total: {
      type: Number,
      default: 0
    },
  },
  data () {
    return {
      activeKey: "1",
      radioStyle: {
        display: "block",
        height: "30px",
        lineHeight: "30px"
      },
      permissionsValue: 1,
      selectedRowKeys: [],
      deleteIndex: null,
      nowMemberId: null
    };
  },
  computed: {
    rowSelection () {
      return {
        selectedRowKeys: this.selectedRowKeys,
        onChange: selectedRowKeys => {
          this.selectedRowKeys = selectedRowKeys;
        }
      };
    }
  },
  methods: {
    getCheckedKeys (checkedKeys) {
      this.$emit("checked-key", checkedKeys)
    },
    onDeleteMember (members) {
      this.nowMemberId = members.id;
      this.deleteIndex = 1;
    },
    getPermissionsValue () {
      console.log(this.permissionsValue);
    },
    onBatchRemove () {
      this.deleteIndex = 0;
    },
    onConfirmDelete () {
      this.deleteIndex == 1
        ? this.$emit("confirmDelete", this.nowMemberId)
        : this.$emit("confirmDelete", this.selectedRowKeys);
      this.selectedRowKeys = [];
    },
    onSave () {
      console.log(this.checkedKeys);
      this.$emit("suer-permission", true)
    },
    /**
     * @description: 分页
     * @param {*} page
     * @param {*} pageSize
     * @return {*}
     */
    onPageChange (page, pageSize) {
      this.$emit("pageChange", { page, pageSize })
    },
    onSizeChange (current, size) {
      this.$emit("sizeChange", { current, pageSize: size })
    },
  }
};
</script>

<style scoped lang="less">
.ant-table-striped :deep(.table-striped) {
  background-color: #000 !important;
}
.ant-page-header-heading .ant-avatar {
  width: 80px;
  height: 80px;
}
</style>
